<template>
    <div class="page-container">
        <div>
            <div class="operation-container">
                <el-button type="primary" @click="onPrint">打印</el-button>
            </div>
            <div id="deviceDispatchPrint" class="print-container">
                <div class="print-title">立项申请单</div>
                <table class="table-class" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="print-label">项目编码</td>
                        <td class="print-input-content2">
                            {{ form.projectCode }}
                        </td>
                        <td class="print-label">项目名称</td>
                        <td class="print-input-content2">
                            {{ form.projectName }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">业主单位名称</td>
                        <td class="print-input-content2">
                            {{ form.clientCompanyName }}
                        </td>
                        <td class="print-label">业主单位重要性</td>
                        <td class="print-input-content2">
                            {{ form.importanceOfClient }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">取得方式</td>
                        <td class="print-input-content2">
                            {{ form.wayOfGet }}
                        </td>
                        <td class="print-label">是否需要签订合同</td>
                        <td class="print-input-content2">
                            {{ form.needContract }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">项目地址</td>
                        <td class="print-input-content2">
                            {{ form.projectAddress }}
                        </td>
                        <td class="print-label">办事处</td>
                        <td class="print-input-content2">
                            {{ form.branchOffice }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">项目开始日期</td>
                        <td class="print-input-content2">
                            {{ formatUtil.dateFormat(form.projectBeginDate) }}
                        </td>
                        <td class="print-label">项目结束日期</td>
                        <td class="print-input-content2">
                            {{ formatUtil.dateFormat(form.projectCompleteDate) }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">合同额(元)</td>
                        <td class="print-input-content2">
                            {{ form.amountOfContract == null ? '' : form.amountOfContract / 100 }}
                        </td>
                        <td class="print-label">毛利润(元)</td>
                        <td class="print-input-content2">
                            {{ form.grossProfit == null ? '' : form.grossProfit / 100 }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">质量目标</td>
                        <td class="print-input-content2">
                            {{ form.goalOfQuality }}
                        </td>
                        <td class="print-label">经营计提基数</td>
                        <td class="print-input-content2">
                            {{ form.accrualRadix }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">经营计提比例(%)</td>
                        <td class="print-input-content2">
                            {{ form.accrualRatio }}
                        </td>
                        <td class="print-label">经营费(元)</td>
                        <td class="print-input-content2">
                            {{ form.feeOfOperation == null ? '' : form.feeOfOperation / 100 }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">项目层级</td>
                        <td class="print-input-content2">
                            {{ form.projectLevel }}
                        </td>
                        <td class="print-label">项目负责人</td>
                        <td class="print-input-content2">
                            {{ form.projectCharge }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">项目主管/副总/主任工程师</td>
                        <td class="print-input-content2">
                            {{ form.projectSupervisor }}
                        </td>
                        <td class="print-label">主办部门</td>
                        <td class="print-input-content2">
                            {{ form.organizeDepartment }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">协办部门</td>
                        <td class="print-input-content2">
                            {{ form.assistedDeptartment }}
                        </td>
                        <td class="print-label">协办部门负责人</td>
                        <td class="print-input-content2">
                            {{ form.assistedCharge }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">协办部门负责人手机号</td>
                        <td class="print-input-content2">
                            {{ form.assistedChargePhone }}
                        </td>
                        <td class="print-label">坐标</td>
                        <td class="print-input-content2">
                            {{ form.address }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">项目风险说明</td>
                        <td class="print-input-content" colspan="3">
                            {{ form.projectRisk }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">经营性分包</td>
                        <td class="print-input-content2">
                            {{ form.subcontractDescription }}
                        </td>
                        <td class="print-label">经营性分包金额(元)</td>
                        <td class="print-input-content2">
                            {{ form.subcontractFee == null ? 0 : form.subcontractFee }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">经营性分包占比(%)</td>
                        <td class="print-input-content2">
                            {{ form.subContractRatio }}
                        </td>
                        <td class="print-label"></td>
                        <td class="print-input-content2"></td>
                    </tr>
                    <tr>
                        <td class="print-label">项目工作内容相关技术及人员要求</td>
                        <td class="print-input-content" colspan="3">
                            {{ form.projectDemand }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">其他分包</td>
                        <td class="print-table-content" colspan="3">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <thead>
                                    <tr>
                                        <th>是否分包</th>
                                        <th>拟分包金额</th>
                                        <th>分包占比(%)</th>
                                        <th>分包情况说明</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in form.subContracts">
                                        <td>{{ item.isSubContract }}</td>
                                        <td>{{ item.count }}</td>
                                        <td>{{ item.amountOfContract == null ? '' : item.amountOfContract / 100 }}</td>
                                        <td>{{ item.reamrk == 0 ? '直接成本' : '分包合同' }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label-line" colspan="4">审批信息</td>
                    </tr>
                    <tr>
                        <td class="print-table-line" colspan="4">
                            <PrintFlowHistoryCpt :taskId="id"></PrintFlowHistoryCpt>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
import { ref, toRefs, reactive, onMounted } from 'vue'
import http from '@/http.js'
import formatUtil from '@/utils/format.js'
import printJS from 'print-js'
import PrintFlowHistoryCpt from '../components/PrintFlowHistoryCpt.vue'

export default {
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    components: {
        PrintFlowHistoryCpt
    },
    setup(props, ctx) {
        const state = reactive({
            form: {},
            picUrls: [],
            flowList: []
        })

        const loadDetail = () => {
            http.fetchForm({
                url: '/yunying/project/findById',
                data: {
                    id: props.id
                }
            }).then((res) => {
                // 基本信息
                let data = res.data
                if (data.importanceOfClient == 1) {
                    data['importanceOfClient'] = '重要'
                } else {
                    data['importanceOfClient'] = '一般'
                }

                if (data.wayOfGet == 1) {
                    data['wayOfGet'] = '委托'
                } else {
                    data['wayOfGet'] = '投标'
                }

                if (data.needContract == 1) {
                    data['needContract'] = '是'
                } else {
                    data['needContract'] = '否'
                }

                if (data.goalOfQuality == 0) {
                    data['goalOfQuality'] = '精品项目'
                } else if (data.goalOfQuality == 1) {
                    data['goalOfQuality'] = '优良项目'
                } else {
                    data['goalOfQuality'] = '合格项目'
                }

                if (data.projectLevel == 1) {
                    data['projectLevel'] = '事业部级'
                } else {
                    data['projectLevel'] = '所级'
                }

                if (data.subcontractDescription == 1) {
                    data['subcontractDescription'] = '有'
                } else {
                    data['subcontractDescription'] = '无'
                }

                if (data.subContracts == null || data.subContracts[0].isSubContract == '') {
                    data['subContracts'] = []
                }
                state.form = data
            })
        }

        const onPrint = () => {
            printJS({
                printable: 'deviceDispatchPrint',
                type: 'html',
                targetStyles: ['*'],
                style: '@page{margin-top: 1mm;margin-bottom: 1mm;}'
            })
        }

        onMounted(() => {
            loadDetail()
        })

        return {
            formatUtil,
            ...toRefs(state),
            onPrint
        }
    }
}
</script>
<style scoped>
@import '@/assets/css/print.css';
</style>
